<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>

    <script>
        window.onload=function() {

            Vue.component("todoWord", {
                props: ['total', 'done'],
                template: "#mycomp"
                ,data:function(){
                    return {}
                }
            })

            var app4 = new Vue({
                el: '#app-4',
                methods:{
                    addthing:function(){
                        this.todos.push({name:this.thing,done:false});
                    },
                    switchdel:function(idx){
                        this.todos[idx].done=!this.todos[idx].done;
                    }
                },
                data: {
                    thing:null,
                    todos:[
                        {name:'吃饭',done:false}
                        ,{name:"睡觉",done:false}
                        ,{name:"哈哈哈",done:true}
                    ]
                }
                ,computed:{
                    done:function(){
                        var count=0;
                        for(var i=0;i<this.todos.length;i++){
                            if(this.todos[i].done){
                                count++;
                            }
                        }
                        return count;
                    }
                }
            });
        }
    </script>
    <style>.del{text-decoration: line-through}</style>
</head>
<body >
<div id="app-4">
<input type="text" v-model="thing" @keyup.enter="addthing"/>
<button v-on:click="addthing">添加</button>
<div v-for="(todo,idx) in todos">
    <input type="checkbox" :checked="todo.done" @click="switchdel(idx)">{{idx}}.
    <span :class="{del: todo.done}">
    {{todo.name}}
        </span>
</div>
    <todo-word :total="todos.length" :done="done"></todo-word>
</div>

<template  id="mycomp">
    <span>
            <div>总共{{total}}个事项,{{done}}个已完成，{{total-done}}个未完成。</div>
        </span>
</template>


</body>
</html>